<html><head>
        <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<!--<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>-->
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
<!--<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>-->
<script type="text/javascript">

 function mapinitialize() {

    

   

   //var geocoder = new google.maps.Geocoder(); // геокодер
 
 }

function codeAddress(){
    //var center_map = new google.maps.LatLng(50.459856,30.731506);

    var myOptions = {

      zoom: 17,

      //center: center_map,

      mapTypeId: google.maps.MapTypeId.ROADMAP

    };
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
     var address = document.getElementById('adr').value;
     var geocoder = new google.maps.Geocoder(); // геокодер
     geocoder.geocode( { 'address':address}, function(results, status) {
         
         
         if (status == google.maps.GeocoderStatus.OK) {

             map.setCenter(results[0].geometry.location);

             var marker = new google.maps.Marker({ // маркер

                 position: results[0].geometry.location,

                 map: map

             });

         } else { 

            alert('Geocode was not successful for the following reason: ' + status);}

     });

 }

 </script>
<script>

var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};

function initialize() {
  // Create the autocomplete object, restricting the search
  // to geographical location types.
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
      { types: ['geocode'] });
  // When the user selects an address from the dropdown,
  // populate the address fields in the form.
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    fillInAddress();
  });
}

// [START region_fillform]
function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}
// [END region_fillform]

// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = new google.maps.LatLng(
          position.coords.latitude, position.coords.longitude);
      autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,
          geolocation));
    });
  }
}
// [END region_geolocation]
$(document).ready(function(){
    initialize();
    mapinitialize();
});
</script>


   
  </head>
 
  <body>
    <div id="locationField">
      <input id="autocomplete" placeholder="Enter your address"
           onFocus="geolocate()"   type="text">
    </div>

    <table id="address">
      <tr>
        <td class="label">Street address</td>
        <td class="slimField"><input class="field" id="street_number"
              disabled="true"></input></td>
        <td class="wideField" colspan="2"><input class="field" id="route"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">City</td>
        <td class="wideField" colspan="3"><input class="field" id="locality"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">State</td>
        <td class="slimField"><input class="field"
              id="administrative_area_level_1" disabled="true"></input></td>
        <td class="label">Zip code</td>
        <td class="wideField"><input class="field" id="postal_code"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">Country</td>
        <td class="wideField" colspan="3"><input class="field"
              id="country" disabled="true"></input></td>
      </tr>
    </table>
      
    




 



 

 

    <p>

        <input type="text" id="adr" value="20 Артема" />

        <input type="button" value="Поиск" onclick="codeAddress()">

      </p>

      <div id="map_canvas" style="width: 800px; height: 600px"></div>

  </body>

</html>

    
    
    
    
    
    
    
    